<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <body>

        <ui:composition template="./../Templates/general2.xhtml">
            <ui:param name="title" value="Instituciones" />

            <ui:define name="extraHead">
                <script type="text/javascript" src="/satk/resources/js/script-admin-institucion.js"/>
            </ui:define>
            
            <ui:define name="content">
               
                <ui:decorate template="/Templates/formGeneral.xhtml">
                    <ui:param name="id" value="form-edit"/>
                    <ui:param name="title" value="Editando Instituci&oacute;n"/>

                    <ui:define name="before">
                        <script type="text/javascript">
                            jQuery(function(){
                                SATK.Forms.markRequired("#form-edit");
                            })
                        </script>                                
                    </ui:define> <!-- form:before -->

                    <ui:define name="content">
                        <h:messages styleClass="validator-messages"/>
                        <p>
                            <h:outputLabel for="nombre">Nombre<span/></h:outputLabel>
                            <h:inputText id="nombre" value="#{editInstitucionBeans.edit.nombre}"
                                         maxlength="100"/>
                        </p>
                        <p>
                            <h:outputLabel for="siglas">Siglas<span/></h:outputLabel>
                            <h:inputText id="siglas" value="#{editInstitucionBeans.edit.siglas}" 
                                         maxlength="10" />
                        </p>
                    </ui:define> <!-- form:content -->

                    <ui:define name="command">
                        <h:commandButton id="guardar" value="Actualizar">
                            <f:ajax event="click" execute="@form" render="@form"
                                    listener="#{editInstitucionBeans.edit()}"
                                    onerror="function(ex){eventoEdicion(this, ex);}"
                                    onevent="function(evnt){eventoEdicion(this, evnt);}"/>
                        </h:commandButton>
                        <h:commandButton id="cancelar" value="Cancelar" onclick="eventCancelEdit();">
                            <f:ajax event="click" listener="#{editInstitucionBeans.cancelEdit()}"/>
                        </h:commandButton>
                    </ui:define> <!-- form:command -->

                    <ui:define name="boxMsg">
                        <div id="msg-edita"/>
                    </ui:define> <!-- form:boxMsg -->

                </ui:decorate> <!-- form:[form-edit] -->
                
                <ui:decorate template="/Templates/formGeneral.xhtml">
                    <ui:param name="id" value="form-registro"/>
                    <ui:param name="title" value="Registro de Instituci&oacute;n" />
                    
                    <ui:define name="before">
                        <script type="text/javascript">
                            jQuery(function(){
                                SATK.Forms.markRequired("#form-registro");
                            });
                        </script>
                    </ui:define> <!-- form:before -->

                    <ui:define name="content">
                        <h:messages styleClass="validator-messages" />
                        <p>
                            <h:outputLabel for="nombre">Nombre<span/></h:outputLabel>
                            <h:inputText id="nombre" value="#{addInstitucionBeans.news.nombre}" 
                                         maxlength="100"/>
                        </p>
                        <p>
                            <h:outputLabel for="siglas">Siglas:<span/></h:outputLabel>
                            <h:inputText id="siglas" value="#{addInstitucionBeans.news.siglas}" 
                                         maxlength="10" />
                        </p>
                    </ui:define> <!-- form:content -->

                    <ui:define name="command">
                        <h:commandButton id="guardar" value="Registrar">
                            <f:ajax event="click" execute="@form" render="@form" 
                                    listener="#{addInstitucionBeans.add()}"
                                    onerror="function(ex){eventRegistro(this, ex);}"  
                                    onevent="function(evnt){eventRegistro(this, evnt);}"/>
                        </h:commandButton>
                    </ui:define> <!-- form:command -->

                    <ui:define name="boxMsg">
                        <div id="msg-registro"/>
                    </ui:define> <!-- form:boxMsg -->

                </ui:decorate> <!-- form:[form-registro] -->
                
                

                <ui:decorate template="/Templates/elms/entradaSimple.xhtml">
                    <ui:param name="id" value="control-instituciones" />

                    <ui:define name="content">
                        <a href="#" id="btn-updateList">Actualizar tabla</a>
                        <a href="#" value="Nueva Instituci&oacute;n" id="btn-openRegistro">Nueva Instituci&oacute;n</a>
                    </ui:define>
                </ui:decorate> <!-- entradaSimple:[control-instituciones] -->

                <ui:decorate template="/Templates/elms/entrada.xhtml">
                    <ui:param name="id" value="lista-instituciones"/>
                    <ui:define name="title">Instituciones Registradas</ui:define>

                    <ui:define name="content">
                        <h:form id="action-institucion">
                            <h:dataTable id="tabInstituciones" styleClass="ui-table" rowClasses=", row-inpar"
                                         value="#{allInsitucionesBean.dataModel}" var="inst">
                                <c:set value="#{allInsitucionesBean.dataModel.rowIndex+1}" var="indexRow"/>

                                <!-- Columna de numeración -->
                                <h:column >
                                    <f:facet name="header"><h:outputText value="No."/></f:facet>
                                    <h:outputText value="#{indexRow}" />
                                </h:column>

                                <!-- Columa de nombre completo de la institución -->
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Instituci&oacute;n" style="width: 400px; display: block;" />
                                    </f:facet>
                                    <h:outputText value="#{inst.nombre}" />
                                </h:column>

                                <!-- Columna de sigla -->
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Sigla" style="width: 80px; display: block;" />
                                    </f:facet>
                                    <h:outputText value="#{inst.siglas}" style="text-align: center; display: block" />
                                </h:column>

                                <!-- Columna de accion -->
                                <h:column>
                                    <f:facet name="header">Acción</f:facet>
                                    <h:commandLink title="Editar">Editar
                                        <f:ajax event="click" listener="#{editInstitucionBeans.startEdit(inst)}"
                                                onevent="function(evnt){openEdit(evnt);}"
                                                onerror="function(ex){}"/>
                                    </h:commandLink>
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </ui:define>  <!-- entrada:content -->
                </ui:decorate> <!-- entrada:[lista-instituciones] -->

            </ui:define> <!-- page:content-->

        </ui:composition>
    </body>
</html>
